<script setup>
import AxisLabel from './AxisLabel.vue'
import { computed, ref } from 'vue'
import { valueToPoint } from './util.js'

const props = defineProps({
    stats: Array
})
const radis = ref(80)
const points = computed(() => {
    const total = props.stats.length
    return props.stats.map((stat, i) => {
        const { x, y } = valueToPoint(radis.value*stat.value/100, i, total)
        return `${x},${y}`
    }).join(' ')
})
</script>

<template>
    <g>
        <polygon :points="points"></polygon>
        <circle cx="100" cy="100" :r="radis"></circle>
        <axis-label v-for="(stat, index) in stats" :stat="stat" :index="index" :total="stats.length" :radis="radis"></axis-label>
    </g>
</template>